<template>
  <!--图标选择Modal-->
  <a-modal
    title="图标选择"
    :visible="visible"
    :width="width"
    :confirmLoading="confirmLoading"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <icon-selector v-model="currentSelectedIcon" @change="handleIconChange"/>
    </a-card>
  </a-modal>
</template>

<script>
import { emptyObject } from '@/utils/samsUtil'
import IconSelector from '@/components/IconSelector'

// 图标选择Modal
export default {
  name: 'IconSelectorModal',
  components: {
    IconSelector
  },
  data () {
    return {
      currentSelectedIcon: 'info-circle',
      visible: false,
      confirmLoading: false,
      width: 1000
    }
  },
  methods: {
    // Modal show
    showModal (icon) {
      if (icon) {
        this.currentSelectedIcon = icon
      } else {
        this.currentSelectedIcon = 'info-circle'
      }
      this.visible = true
    },
    // Modal hide
    hideModal () {
      this.visible = false
    },
    // Modal 确定按钮
    handleModalOk () {
      const { currentSelectedIcon } = this
      if (emptyObject(currentSelectedIcon)) {
        this.$message.warning('选择一个图标吧!')
        return false
      }
      this.hideModal()
      this.$emit('iconSel', currentSelectedIcon)
    },
    // Modal 取消按钮
    handleModalCancel () {
      this.hideModal()
    },
    // 选中图标事件
    handleIconChange (icon) {
      this.currentSelectedIcon = icon
      // console.log('change Icon', icon)
      this.$message.info(<span>选中图标 <code>{icon}</code></span>)
    }
  }
}
</script>
